<template>
    <xt-card>
        <div class="row-search">
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button type="success" @click="addClick">添加</el-button>
        </div>
        <div class="row-table">
            <el-table :data="state.tableData" row-key="id"  border
                style="width: 100%" :max-height="state.tableMaxHeight"
                v-if="state.tableMaxHeight > 0"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="index" width="90" label="序号" />
                <el-table-column prop="acName" label="分类名" />
                <el-table-column prop="acSort" width="80"  label="排序" />
                <el-table-column label="状态" width="80">
                    <template #default="scope">
                        <el-tag type="danger" v-if="scope.row.acShow == 0">不显示</el-tag>
                        <el-tag type="success" v-else-if="scope.row.acShow == 1">显示</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button @click.prevent="editRowClick(scope.$index, scope.row)" type="primary" size="mini">
                            编辑
                        </el-button>
                        <el-button @click.prevent="deleteRowClick(scope.$index, scope.row)" 
                            type="danger" size="mini"
                            :loading="scope.row.deleteLoading"
                            :disabled="scope.row.deleteLoading">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <form-dialog :dialogVisible="state.dialogVisible"
            :dialogLoading="state.dialogLoading"
            :id="state.selectOpId"
            :catOptions="state.tableData"
            @formDialogCancel="formDialogCancel"
            @formDialogConfirm="formDialogConfirm"/>
    </xt-card>
</template>

<script setup>
    import {
        reactive
    } from "vue"
    import { onMounted } from "vue"
    import { ElMessageBox,ElMessage } from 'element-plus';
    import store from '@/store'
    import { request } from "@/utils/request";
    import FormDialog from './formDialog.vue'

    const state = reactive({
        tableData: [],
        tableMaxHeight: 0,
        selectOpId: '',
        dialogVisible: false,
        dialogLoading: false,
    })
    onMounted(()=>{
        state.tableMaxHeight = store.getters['view/getMainHeight'] - 116;
        loadList();
    })
    const searchClick = () => {
        loadList();
    }

    const addClick = () => {
        state.dialogVisible = true;
    }

    const editRowClick = (index, row) => {
       state.selectOpId = row.id;
       state.dialogVisible = true;
    }

    const formDialogCancel = (e) => {
        state.selectOpId = "";
        state.dialogVisible = false;
    }

    const formDialogConfirm = (e) => {
        state.dialogLoading = true;
        setTimeout(()=>{
            ElMessage.success({
                message: '操作成功',
                type: 'success',
            })
            state.selectOpId = "";
            state.dialogLoading = false;
            state.dialogVisible = false;
        }, 2000)
    }

    const deleteRowClick = (index, row) => {
        ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            row.deleteLoading = true;
            setTimeout(()=>{
                ElMessage.success({
                    message: '操作成功',
                    type: 'success',
                })
                row.deleteLoading = false;
            }, 2000)
        }).catch(() => {
            row.deleteLoading = false;
            ElMessage({
                type: 'info',
                message: '已取消删除',
            });
        });
    }

    const loadList = () => {
        request({
            url: '/artcat/list',
            method: 'get',
        }).then(function (response) {
            let res = response.data;
            console.log("res", res)
            state.tableData = res;
        })
    }
</script>

<style scoped>
    .row-table {
        flex: 1;
        overflow: hidden;
    }
    .row-search {
        padding: 10px 0;
    }
    .row-pager {
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>